<template>
    <!-- 7.3.4发版先取消选择主题颜色 -->
<!--    <a-menu :theme="sideBar_Background=='#fafafa'? 'light':'dark'" :open-keys="openKeys"-->
<!--            :class="[sideBar_Background=='#fafafa'? 'leftMenu_white':'leftMenu']" :mode="menuStyle"-->
<!--            :style="{background:sideBar_Background}" :selectedKeys="selectedKeys"-->
<!--            @openChange="onOpenChange">-->
    <a-menu :open-keys="openKeys"  class="new-theme" :mode="menuStyle"
            :selectedKeys="selectedKeys"
            @openChange="onOpenChange">
        <template v-for="(item,index) in menu.children">
            <a-menu-item  v-if="showSubMenu(item)" :key="item.key"  @click="handMenuClick(item,index,'single')">
                <template v-if="item.icon">
                    <rx-use-icon v-model="item.icon"></rx-use-icon>
                </template>
                <span :class="{sideBar_white:sideBar_Background=='#fafafa'}" :title="$i18(item.remarks,'菜单备注')">{{ $i18(item.title,'菜单名称')}}</span>
            </a-menu-item>
            <sub-menu  v-else :key="item.key" :menu-item="item" :subindex="index" :subpath="index+'.'"
                      :hand-click="handMenuClick"/>
        </template>
    </a-menu>
</template>
<script>
import SubMenu from '../SubMenu'
import menuPortal from "@/api/portal/core/menuPortal";
import {mapState,mapGetters} from 'vuex';
import {RxUseIcon} from "@lowcode/jpaas-common-lib"
export default {
    name: "left-menu",
    components: {
        'sub-menu': SubMenu,
        RxUseIcon
    },
    mixins:[menuPortal],
    props: {
        menu: {type: Object},
    },
    data() {
        return {
            appKey: "",
            rootSubmenuKeys: [],
            customArr: ['customIcon', 'userCustomIcon']
        }
    },
    mounted() {
        this.rootlist();
        let self=this;
        this.$bus.on('handMenuClick', (item) => {
            self.handMenuClick(item);
        })
    },
    computed: {
        ...mapState({
            sideBar_Background: (state) => state.appSetting.sideBar_Background,
            frontType:state => state.appSetting.frontType,
        }),
        ...mapGetters({'activeKey' : 'appSetting/getActiveKey'} ),
        /**
         * 菜单选中的KEY
         * @returns
         */
        selectedKeys(){
            return [this.activeKey];
        }
    },
    methods: {
        rootlist() {
            this.rootSubmenuKeys = [];
            if( this.menu.children && this.menu.children.length > 0 ){
                for (var listyp of this.menu.children) {
                    this.rootSubmenuKeys.push(listyp.key)
                }
            }

        },
        onOpenChange(openKeys) {
            var latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);
            if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
                this.setOpenKeys(openKeys)
            } else {
                var lasty = []
                lasty.push(latestOpenKey)
                this.setOpenKeys(lasty)
            }
        },
        showSubMenu(item) {
            var showType = item.showType;
            if (!item.children || showType == 'FUNS' || showType == 'FUN' || showType == 'FUNS_BLOCK') {
                return true;
            }
            return false;
        }
    },
    watch: {
        menu: function (val) {
            this.rootlist();
            if (val && val.key) {
                this.appKey = val.key;
            }
        },

    }
}
</script>

<style scoped>
.new-theme >>>ul{
    background: #fff !important;
    box-shadow: none!important;
}
/*.leftMenu_white >>>ul{*/
/*    background: #eff0f1!important;*/
/*    box-shadow: none !important;*/
/*}*/

.new-theme >>> .ant-menu-item{
    background: #fff !important;
    /*color: rgba(43, 48, 66, 1) !important;*/
}
.ant-menu-vertical .ant-menu-submenu, .ant-menu-vertical-left .ant-menu-submenu, .ant-menu-vertical-right .ant-menu-submenu, .ant-menu-inline .ant-menu-submenu{
    background: #fff;
    /*color: rgba(43, 48, 66, 1) !important;*/
}
.sideBar_white{
    color: #46494d!important;
}
.submenu_white >>>li{
    color: #46494d;
}
.ant-menu-vertical .ant-menu-item::after, .ant-menu-vertical-left .ant-menu-item::after, .ant-menu-vertical-right .ant-menu-item::after, .ant-menu-inline .ant-menu-item::after{
    border-right: 3px solid rgba(26, 94, 255, 1);
}
.new-theme >>> .ant-menu-item, .new-theme >>> .ant-menu-submenu-title {
    margin: 0 !important;
}
.ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left{
    border-right: 1px solid transparent !important;
}
.new-theme >>> .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected,.new-theme >>> .ant-menu-item-selected{
    background: rgba(26, 94, 255, 0.08) !important;
    color: rgba(26, 94, 255, 1) !important;
}
</style>